Merge remote-tracking branch 'origin/v3' into fix/3952

2026-01-14 12:14:41 +01:00 · 2025-05-11 19:21:02 +02:00
parent 322a6f467a d140acc608
commit 266e870e67
71 changed files with 1131 additions and 1000 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report-v3.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before reporting a bug, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: env
    attributes:
@@ -44,7 +44,7 @@ body:
    id: reproduction
    attributes:
      label: Reproduction
-      description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it.
+      description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided, it will be closed automatically after a while.
      placeholder: https://github.com/my/reproduction
    validations:
      required: true
--- a/.github/ISSUE_TEMPLATE/feature-request-v3.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before requesting a feature, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/ISSUE_TEMPLATE/question-v3.yml
+++ b/.github/ISSUE_TEMPLATE/question-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before asking a question, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before asking a question, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/reproduire/needs-reproduction.md
+++ b/.github/reproduire/needs-reproduction.md
@@ -0,0 +1,30 @@
+Would you be able to provide a [reproduction](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction)? 🙏
+
+<details>
+<summary>More info</summary>
+
+### Why do I need to provide a reproduction?
+
+Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.
+
+### What will happen?
+
+If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.
+
+If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), they will be closed automatically after a while. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.
+
+### How can I create a reproduction?
+
+We have templates to create a minimal reproduction:
+
+* **Nuxt**: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks
+* **Vue**: https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn
+
+Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction).
+
+You might also find these other articles interesting and/or helpful:
+
+- [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required)
+- [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
+
+</details>
--- a/.github/workflows/reproduire.yml
+++ b/.github/workflows/reproduire.yml
@@ -0,0 +1,17 @@
+name: reproduire
+
+on:
+  issues:
+    types: [labeled]
+
+permissions:
+  issues: write
+
+jobs:
+  reproduire:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
+        with:
+          label: needs reproduction
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <slot />
  </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>

 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
  }
--- a/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'command-palette-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
--- a/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
--- a/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
--- a/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
+++ b/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'
+
+const UBadge = resolveComponent('UBadge')
+
+type Account = {
+  id: string
+  name: string
+}
+
+type PaymentStatus = 'paid' | 'failed' | 'refunded'
+
+type Payment = {
+  id: string
+  date: string
+  status: PaymentStatus
+  email: string
+  amount: number
+  account: Account
+}
+
+const getColorByStatus = (status: PaymentStatus) => {
+  return {
+    paid: 'success',
+    failed: 'error',
+    refunded: 'neutral'
+  }[status]
+}
+
+const data = ref<Payment[]>([
+  {
+    id: '4600',
+    date: '2024-03-11T15:30:00',
+    status: 'paid',
+    email: 'james.anderson@example.com',
+    amount: 594,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  },
+  {
+    id: '4599',
+    date: '2024-03-11T10:10:00',
+    status: 'failed',
+    email: 'mia.white@example.com',
+    amount: 276,
+    account: {
+      id: '2',
+      name: 'Account 2'
+    }
+  },
+  {
+    id: '4598',
+    date: '2024-03-11T08:50:00',
+    status: 'refunded',
+    email: 'william.brown@example.com',
+    amount: 315,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  },
+  {
+    id: '4597',
+    date: '2024-03-10T19:45:00',
+    status: 'paid',
+    email: 'emma.davis@example.com',
+    amount: 529,
+    account: {
+      id: '2',
+      name: 'Account 2'
+    }
+  },
+  {
+    id: '4596',
+    date: '2024-03-10T15:55:00',
+    status: 'paid',
+    email: 'ethan.harris@example.com',
+    amount: 639,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  }
+])
+
+const columns: TableColumn<Payment>[] = [
+  {
+    id: 'title',
+    header: 'Item'
+  },
+  {
+    id: 'account_id',
+    accessorKey: 'account.id'
+  },
+  {
+    accessorKey: 'id',
+    header: '#',
+    cell: ({ row }) =>
+      row.getIsGrouped()
+        ? `${row.getValue('id')} records`
+        : `#${row.getValue('id')}`,
+    aggregationFn: 'count'
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => {
+      return new Date(row.getValue('date')).toLocaleString('en-US', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      })
+    },
+    aggregationFn: 'max'
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    meta: {
+      class: {
+        td: 'w-full'
+      }
+    },
+    cell: ({ row }) =>
+      row.getIsGrouped()
+        ? `${row.getValue('email')} customers`
+        : row.getValue('email'),
+    aggregationFn: 'uniqueCount'
+  },
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'EUR'
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+    aggregationFn: 'sum'
+  }
+]
+
+const grouping_options = ref<GroupingOptions>({
+  groupedColumnMode: 'remove',
+  getGroupedRowModel: getGroupedRowModel()
+})
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :grouping="['account_id', 'status']"
+    :grouping-options="grouping_options"
+    :ui="{
+      root: 'min-w-full',
+      td: 'empty:p-0' // helps with the colspaned row added for expand slot
+    }"
+  >
+    <template #title-cell="{ row }">
+      <div v-if="row.getIsGrouped()" class="flex items-center">
+        <span
+          class="inline-block"
+          :style="{ width: `calc(${row.depth} * 1rem)` }"
+        />
+
+        <UButton
+          variant="outline"
+          color="neutral"
+          class="mr-2"
+          size="xs"
+          :icon="row.getIsExpanded() ? 'i-lucide-minus' : 'i-lucide-plus'"
+          @click="row.toggleExpanded()"
+        />
+        <strong v-if="row.groupingColumnId === 'account_id'">{{
+          row.original.account.name
+        }}</strong>
+        <UBadge
+          v-else-if="row.groupingColumnId === 'status'"
+          :color="getColorByStatus(row.original.status)"
+          class="capitalize"
+          variant="subtle"
+        >
+          {{ row.original.status }}
+        </UBadge>
+      </div>
+    </template>
+  </UTable>
+</template>
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'

+const route = useRoute()
+const router = useRouter()
+
 const items: TabsItem[] = [
  {
-    label: 'Account'
+    label: 'Account',
+    value: 'account'
  },
  {
-    label: 'Password'
+    label: 'Password',
+    value: 'password'
  }
 ]

-const active = ref('0')
-
-// Note: This is for demonstration purposes only. Don't do this at home.
-onMounted(() => {
-  setInterval(() => {
-    active.value = String((Number(active.value) + 1) % items.length)
-  }, 2000)
+const active = computed({
+  get() {
+    return (route.query.tab as string) || 'account'
+  },
+  set(tab) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.push({
+      path: '/components/tabs',
+      query: { tab },
+      hash: '#control-active-item'
+    })
+  }
 })
 </script>

--- a/docs/app/composables/useLinks.ts
+++ b/docs/app/composables/useLinks.ts
@@ -98,7 +98,7 @@ export function useLinks() {
      label: 'Raycast Extension',
      description: 'Access Nuxt UI components without leaving your editor.',
      icon: 'i-simple-icons-raycast',
-      to: 'https://www.raycast.com/HugoRCD/nuxt-ui',
+      to: 'https://www.raycast.com/HugoRCD/nuxt',
      target: '_blank'
    }, {
      label: 'Figma to Code',
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -973,7 +973,7 @@ export default {

 ```vue [src/runtime/components/Card.vue]
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.header({ class: props.ui?.header })">
      <slot name="header" />
    </div>
--- a/docs/content/1.getting-started/contribution.md
+++ b/docs/content/1.getting-started/contribution.md
@@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc

 ### Documentation

-The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Content v3 Docs](https://content3.nuxt.dev/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
+The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started) for details on how it works. Here's a breakdown of its structure:

 ```bash
 ├── app/
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -24,7 +24,7 @@ It requires two props:
 **No validation library is included** by default, ensure you **install the one you need**.
 ::

-::tabs
+::tabs{class="gap-0"}
  ::component-example{label="Valibot"}
  ---
  name: 'form-example-valibot'
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -21,8 +21,12 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
+- `collapsible?: boolean`{lang="ts-type"}
+- `defaultOpen?: boolean`{lang="ts-type"}
+- `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -140,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.

 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
 ::

 ::component-code
--- a/docs/content/3.components/slider.md
+++ b/docs/content/3.components/slider.md
@@ -136,6 +136,21 @@ props:
 ---
 ::

+### Tooltip :badge{label="Soon" class="align-text-top"}
+
+Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
+
+::component-code
+---
+ignore:
+  - defaultValue
+  - tooltip
+props:
+  defaultValue: 50
+  tooltip: true
+---
+::
+
 ### Disabled

 Use the `disabled` prop to disable the Slider.
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -260,6 +260,30 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::

+### With grouped rows
+
+You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping).
+
+#### Important parts:
+
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
+* Use `aggregateFn` on column definition to define how to aggregate the rows.
+* `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-grouped-rows-example'
+highlights:
+  - 159
+  - 169
+class: '!p-0'
+---
+::
+
 ### With row selection

 You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -210,10 +210,6 @@ You can control the active item by using the `default-value` prop or the `v-mode

 :component-example{name="tabs-model-value-example"}

-::tip
-You can also pass the `value` of one of the items if provided.
-::
-
 ### With content slot

 Use the `#content` slot to customize the content of each item.
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,25 +3,25 @@
  "name": "@nuxt/ui-docs",
  "type": "module",
  "dependencies": {
-    "@ai-sdk/vue": "^1.2.10",
+    "@ai-sdk/vue": "^1.2.11",
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.40",
+    "@iconify-json/lucide": "^1.2.41",
    "@iconify-json/simple-icons": "^1.2.33",
    "@iconify-json/vscode-icons": "^1.2.20",
    "@nuxt/content": "^3.5.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^3.1.1",
-    "@nuxthub/core": "^0.8.25",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
+    "@nuxthub/core": "^0.8.27",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
    "@vueuse/integrations": "^13.1.0",
    "@vueuse/nuxt": "^13.1.0",
-    "ai": "^4.3.13",
+    "ai": "^4.3.15",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
-    "motion-v": "^1.0.1",
+    "motion-v": "^1.0.2",
    "nuxt": "^3.17.2",
    "nuxt-component-meta": "^0.11.0",
    "nuxt-llms": "^0.1.2",
@@ -31,12 +31,12 @@
    "sortablejs": "^1.15.6",
    "superstruct": "^2.0.2",
    "ufo": "^1.6.1",
-    "valibot": "^1.0.0",
-    "workers-ai-provider": "^0.3.0",
+    "valibot": "^1.1.0",
+    "workers-ai-provider": "^0.3.1",
    "yup": "^1.6.1",
    "zod": "^3.24.4"
  },
  "devDependencies": {
-    "wrangler": "^4.14.1"
+    "wrangler": "^4.14.4"
  }
 }
--- a/docs/server/plugins/llms.ts
+++ b/docs/server/plugins/llms.ts
@@ -46,11 +46,33 @@ const parseBoolean = (value?: string): boolean => value === 'true'

 function getComponentMeta(componentName: string) {
  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-  const metaComponentName = `U${pascalCaseName}`
+
+  const strategies = [
+    `U${pascalCaseName}`,
+    `Prose${pascalCaseName}`,
+    pascalCaseName
+  ]
+
+  let componentMeta: any
+  let finalMetaComponentName: string = pascalCaseName
+
+  for (const nameToTry of strategies) {
+    finalMetaComponentName = nameToTry
+    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
+    if (metaAttempt) {
+      componentMeta = metaAttempt
+      break
+    }
+  }
+
+  if (!componentMeta) {
+    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
+  }
+
  return {
    pascalCaseName,
-    metaComponentName,
-    componentMeta: (meta as Record<string, any>)[metaComponentName]?.meta
+    metaComponentName: finalMetaComponentName,
+    componentMeta
  }
 }

@@ -168,6 +190,7 @@ function emitItemHandler(event: any): string {
 const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
+
  return {
    [pro ? 'uiPro' : 'ui']: prose
      ? { prose: { [componentName]: componentTheme } }
@@ -284,10 +307,14 @@ export default defineNitroPlugin((nitroApp) => {
    const componentName = camelCase(doc.title)

    visitAndReplace(doc, 'component-theme', (node) => {
-      const attributes = node[1] as ComponentAttributes
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.slug
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
      const pro = parseBoolean(attributes[':pro'])
      const prose = parseBoolean(attributes[':prose'])
-      const appConfig = generateThemeConfig({ pro, prose, componentName })
+      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })

      replaceNodeWithPre(
        node,
@@ -322,14 +349,23 @@ export default defineNitroPlugin((nitroApp) => {
    })

    visitAndReplace(doc, 'component-props', (node) => {
-      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.name
+      const isProse = parseBoolean(attributes[':prose'])
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
+
      if (!componentMeta?.props) return

+      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
+
      const interfaceCode = generateTSInterface(
-        `${pascalCaseName}Props`,
+        interfaceName,
        Object.values(componentMeta.props),
        propItemHandler,
-        `Props for the ${pascalCaseName} component`
+        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
      )
      replaceNodeWithPre(node, 'ts', interfaceCode)
    })
--- a/package.json
+++ b/package.json
@@ -150,7 +150,7 @@
    "tailwindcss": "^4.1.5",
    "tinyglobby": "^0.2.13",
    "unplugin": "^2.3.2",
-    "unplugin-auto-import": "^19.1.2",
+    "unplugin-auto-import": "^19.2.0",
    "unplugin-vue-components": "^28.5.0",
    "vaul-vue": "^0.4.1",
    "vue-component-type-helpers": "^2.2.10"
@@ -166,7 +166,7 @@
    "happy-dom": "^17.4.6",
    "nuxt": "^3.17.2",
    "release-it": "^19.0.2",
-    "vitest": "^3.1.2",
+    "vitest": "^3.1.3",
    "vitest-environment-nuxt": "^1.0.1",
    "vue-tsc": "^2.2.10"
  },
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,10 +9,10 @@
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
-    "@iconify-json/lucide": "^1.2.40",
+    "@iconify-json/lucide": "^1.2.41",
    "@iconify-json/simple-icons": "^1.2.33",
    "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.25",
+    "@nuxthub/core": "^0.8.27",
    "nuxt": "^3.17.2",
    "zod": "^3.24.4"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -89,7 +89,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
 </script>

 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <AccordionItem
      v-for="(item, index) in props.items"
      v-slot="{ open }"
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -97,7 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>

 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <slot name="leading">
      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -81,7 +81,7 @@ function onError() {
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
    <component
      :is="ImageComponent"
      v-if="src && !error"
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -93,7 +93,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
  </Primitive>
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -65,14 +65,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
 </script>

 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
    <slot name="leading">
      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
    </slot>

    <slot>
-      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label })">
        {{ label }}
      </span>
    </slot>
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -81,7 +81,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>

 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <ol :class="ui.list({ class: props.ui?.list })">
      <template v-for="(item, index) in items" :key="index">
        <li :class="ui.item({ class: props.ui?.item })">
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -123,7 +123,7 @@ const ui = computed(() => tv({
    v-slot="{ active, ...slotProps }"
    :type="type"
    :disabled="disabled || isLoading"
-    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
    custom
  >
@@ -143,7 +143,7 @@ const ui = computed(() => tv({
      </slot>

      <slot>
-        <span v-if="label" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label, active })">
          {{ label }}
        </span>
      </slot>
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -157,7 +157,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
    :default-value="defaultValue"
    :locale="locale"
    :dir="dir"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
  >
    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
      <slot name="header" />
    </div>
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -278,7 +278,7 @@ defineExpose({
    role="region"
    aria-roledescription="carousel"
    tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    @keydown="onKeyDown"
  >
    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -101,7 +101,7 @@ function onUpdate(value: any) {

 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.container({ class: props.ui?.container })">
      <CheckboxRoot
        :id="id"
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -153,7 +153,7 @@ function onUpdate(value: any) {
    v-bind="rootProps"
    :name="name"
    :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    @update:model-value="onUpdate"
  >
    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <Slot v-bind="$attrs">
      <slot />
    </Slot>
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -46,7 +46,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
 </script>

 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <CollapsibleTrigger v-if="!!slots.default" as-child>
      <slot :open="open" />
    </CollapsibleTrigger>
--- a/src/runtime/components/ColorPicker.vue
+++ b/src/runtime/components/ColorPicker.vue
@@ -263,7 +263,7 @@ const trackThumbStyle = computed(() => ({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
    <div :class="ui.picker({ class: props.ui?.picker })">
      <div
        ref="selectorRef"
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -249,7 +249,7 @@ const groups = computed(() => {

 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <ListboxFilter v-model="searchTerm" as-child>
      <UInput
        :placeholder="placeholder || t('commandPalette.placeholder')"
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -90,7 +90,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -163,7 +163,7 @@ defineExpose({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <input
      :id="id"
      ref="inputRef"
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -406,7 +406,7 @@ defineExpose({
    v-bind="rootProps"
    :name="name"
    :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    :as-child="!!multiple"
    ignore-filter
    @update:model-value="onUpdate"
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -145,7 +145,7 @@ defineExpose({
  <NumberFieldRoot
    v-bind="rootProps"
    :id="id"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    :name="name"
    :disabled="disabled"
    :locale="locale"
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -3,7 +3,7 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, LinkProps } from '../types'
+import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'

 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>
@@ -26,6 +26,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
   */
  badge?: string | number | BadgeProps
+  /**
+   * Display a tooltip on the item.
+   * Only works when `type` is `link`.
+   * `{ content: { side: 'right' } }`{lang="ts-type"}
+   */
+  tooltip?: TooltipProps
  /**
   * @IconifyIcon
   */
@@ -38,6 +44,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  type?: 'label' | 'link'
  slot?: string
  value?: string
+  /**
+   * Make the item collapsible.
+   * Only works when `orientation` is `vertical`.
+   * @defaultValue true
+   */
+  collapsible?: boolean
  children?: NavigationMenuChildItem[]
  onSelect?(e: Event): void
  [key: string]: any
@@ -143,6 +155,7 @@ import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UBadge from './Badge.vue'
 import UCollapsible from './Collapsible.vue'
+import UTooltip from './Tooltip.vue'

 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
  orientation: 'horizontal',
@@ -229,7 +242,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
          />

-          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length && item.collapsible !== false)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
        </slot>
      </span>
@@ -238,17 +251,18 @@ const lists = computed<NavigationMenuItem[][]>(() =>

  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
    <component
-      :is="(orientation === 'vertical' && item.children?.length && !collapsed) ? UCollapsible : NavigationMenuItem"
+      :is="(orientation === 'vertical' && item.children?.length) ? UCollapsible : NavigationMenuItem"
      as="li"
      :value="item.value || String(index)"
      :default-open="item.defaultOpen"
-      :unmount-on-hide="(orientation === 'vertical' && item.children?.length && !collapsed) ? unmountOnHide : undefined"
+      :disabled="(orientation === 'vertical' && item.children?.length) ? item.collapsible === false : undefined"
+      :unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
      :open="item.open"
    >
      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
        <ReuseLinkTemplate :item="item" :index="index" />
      </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && item.collapsible !== false) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
        <component
          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
          as-child
@@ -256,7 +270,12 @@ const lists = computed<NavigationMenuItem[][]>(() =>
          :disabled="item.disabled"
          @select="item.onSelect"
        >
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </ULinkBase>
+          </UTooltip>
+          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
          </ULinkBase>
        </component>
@@ -289,7 +308,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
        </NavigationMenuContent>
      </ULink>

-      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
+      <template v-if="orientation === 'vertical' && item.children?.length " #content>
        <ul :class="ui.childList({ class: props.ui?.childList })">
          <ReuseItemTemplate
            v-for="(childItem, childIndex) in item.children"
@@ -304,7 +323,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
    </component>
  </DefineItemTemplate>

-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <slot name="list-leading" />

    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -140,7 +140,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
 </script>

 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
        <slot name="first">
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -113,7 +113,7 @@ defineExpose({
    v-bind="{ ...rootProps, ...ariaAttrs }"
    :id="id"
    :name="name"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    @update:model-value="emitFormInput()"
    @complete="onComplete"
  >
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -167,7 +167,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
      <slot name="status" :percent="percent">
        {{ percent }}%
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -166,7 +166,7 @@ function onUpdate(value: any) {
    v-bind="rootProps"
    :name="name"
    :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    @update:model-value="onUpdate"
  >
    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -21,7 +21,7 @@ interface SelectItemBase {
   * @defaultValue 'item'
   */
  type?: 'label' | 'separator' | 'item'
-  value?: string | number
+  value?: AcceptableValue | boolean
  disabled?: boolean
  onSelect?(e?: Event): void
  [key: string]: any
@@ -238,7 +238,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
    @update:model-value="onUpdate"
    @update:open="onUpdateOpen"
  >
-    <SelectTrigger :id="id" :class="ui.base({ class: [props.class, props.ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger :id="id" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
        <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -373,7 +373,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
    @update:open="onUpdateOpen"
  >
    <ComboboxAnchor as-child>
-      <ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
+      <ComboboxTrigger :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
        <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
          <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
            <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -75,7 +75,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator ||
 </script>

 <template>
-  <Separator v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Separator v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.border({ class: props.ui?.border })" />

    <template v-if="label || icon || avatar || !!slots.default">
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -2,6 +2,7 @@
 import type { SliderRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/slider'
+import type { TooltipProps } from '../types'
 import type { ComponentConfig } from '../types/utils'

 type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>
@@ -25,6 +26,12 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
   * @defaultValue 'horizontal'
   */
  orientation?: SliderRootProps['orientation']
+  /**
+   * Display a tooltip around the slider thumbs with the current value.
+   * `{ disableClosingTrigger: true }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  tooltip?: boolean | TooltipProps
  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
  defaultValue?: number | number[]
  class?: any
@@ -44,6 +51,7 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { tv } from '../utils/tv'
+import UTooltip from './Tooltip.vue'

 const props = withDefaults(defineProps<SliderProps>(), {
  min: 0,
@@ -80,7 +88,7 @@ const sliderValue = computed({
  }
 })

-const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+const thumbs = computed(() => sliderValue.value?.length ?? 1)

 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })({
  disabled: disabled.value,
@@ -104,7 +112,7 @@ function onChange(value: any) {
    v-model="sliderValue"
    :name="name"
    :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    :default-value="defaultSliderValue"
    @update:model-value="emitFormInput()"
    @value-commit="onChange"
@@ -113,6 +121,16 @@ function onChange(value: any) {
      <SliderRange :class="ui.range({ class: props.ui?.range })" />
    </SliderTrack>

-    <SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb({ class: props.ui?.thumb })" />
+    <template v-for="thumb in thumbs" :key="thumb">
+      <UTooltip
+        v-if="!!tooltip"
+        :text="thumbs > 1 ? String(sliderValue?.[thumb - 1]) : String(sliderValue)"
+        disable-closing-trigger
+        v-bind="(typeof tooltip === 'object' ? tooltip : {})"
+      >
+        <SliderThumb :class="ui.thumb({ class: props.ui?.thumb })" />
+      </UTooltip>
+      <SliderThumb v-else :class="ui.thumb({ class: props.ui?.thumb })" />
+    </template>
  </SliderRoot>
 </template>
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -129,7 +129,7 @@ defineExpose({
 </script>

 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.header({ class: props.ui?.header })">
      <StepperItem
        v-for="(item, count) in items"
@@ -157,12 +157,12 @@ defineExpose({
        </div>

        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <StepperTitle :class="ui.title({ class: props.ui?.title })">
+          <StepperTitle as="div" :class="ui.title({ class: props.ui?.title })">
            <slot name="title" :item="item">
              {{ item.title }}
            </slot>
          </StepperTitle>
-          <StepperDescription :class="ui.description({ class: props.ui?.description })">
+          <StepperDescription as="div" :class="ui.description({ class: props.ui?.description })">
            <slot name="description" :item="item">
              {{ item.description }}
            </slot>
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -96,7 +96,7 @@ function onUpdate(value: any) {
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.container({ class: props.ui?.container })">
      <SwitchRoot
        :id="id"
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -338,7 +338,7 @@ defineExpose({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
        <slot name="caption">
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
 </script>

 <template>
-  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <TabsList :class="ui.list({ class: props.ui?.list })">
      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />

--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -190,7 +190,7 @@ defineExpose({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <textarea
      :id="id"
      ref="textareaRef"
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -116,7 +116,7 @@ defineExpose({
    v-slot="{ remaining, duration }"
    v-bind="rootProps"
    :data-orientation="orientation"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    :style="{ '--height': height }"
  >
    <slot name="leading">
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -131,7 +131,7 @@ function getOffset(index: number) {
    <ToastPortal v-bind="portalProps">
      <ToastViewport
        :data-expanded="expanded"
-        :class="ui.viewport({ class: [props.class, props.ui?.viewport] })"
+        :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
        :style="{
          '--scale-factor': '0.05',
          '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -198,7 +198,7 @@ const defaultExpanded = computed(() =>

  <TreeRoot
    v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
    :get-key="getItemValue"
    :default-expanded="defaultExpanded"
    :selection-behavior="selectionBehavior"
--- a/src/theme/color-picker.ts
+++ b/src/theme/color-picker.ts
@@ -2,10 +2,10 @@ export default {
  slots: {
    root: 'data-[disabled]:opacity-75',
    picker: 'flex gap-4',
-    selector: 'rounded-md',
+    selector: 'rounded-md touch-none',
    selectorBackground: 'w-full h-full relative rounded-md',
    selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
-    track: 'w-[8px] relative rounded-md',
+    track: 'w-[8px] relative rounded-md touch-none',
    trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
  },
  variants: {
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -25,7 +25,8 @@ export default (options: Required<ModuleOptions>) => ({
      },
      link: {
        list: 'border-default',
-        indicator: 'rounded-full'
+        indicator: 'rounded-full',
+        trigger: 'focus:outline-none'
      }
    },
    orientation: {
--- a/test/components/snapshots/ColorPicker-vue.spec.ts.snap
+++ b/test/components/snapshots/ColorPicker-vue.spec.ts.snap
@@ -3,12 +3,12 @@
 exports[`ColorPicker > renders with as correctly 1`] = `
 "<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
 exports[`ColorPicker > renders with class correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
 exports[`ColorPicker > renders with disabled correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
    </div>
  </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
    </div>
  </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 exports[`ColorPicker > renders with format hex correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
    </div>
  </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
    </div>
  </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
 exports[`ColorPicker > renders with format lab correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
    </div>
  </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
    </div>
  </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
 exports[`ColorPicker > renders with size lg correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
 exports[`ColorPicker > renders with size md correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
 exports[`ColorPicker > renders with size sm correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
 exports[`ColorPicker > renders with size xl correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
 exports[`ColorPicker > renders with size xs correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-4">
-    <div data-v-c9a043d6="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
 exports[`ColorPicker > renders with ui correctly 1`] = `
 "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
  <div data-v-c9a043d6="" class="flex gap-8">
-    <div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
--- a/test/components/snapshots/ColorPicker.spec.ts.snap
+++ b/test/components/snapshots/ColorPicker.spec.ts.snap
@@ -3,12 +3,12 @@
 exports[`ColorPicker > renders with as correctly 1`] = `
 "<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
 exports[`ColorPicker > renders with class correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75 w-96">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
 exports[`ColorPicker > renders with disabled correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75" data-disabled="true">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
    </div>
  </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
 exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
    </div>
  </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
 exports[`ColorPicker > renders with format hex correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
    </div>
  </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
 exports[`ColorPicker > renders with format hsl correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
    </div>
  </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
 exports[`ColorPicker > renders with format lab correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
    </div>
  </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
 exports[`ColorPicker > renders with format rgb correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
    </div>
  </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
 exports[`ColorPicker > renders with size lg correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
 exports[`ColorPicker > renders with size md correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
 exports[`ColorPicker > renders with size sm correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
 exports[`ColorPicker > renders with size xl correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
 exports[`ColorPicker > renders with size xs correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-4">
-    <div data-v-d6f23756="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
 exports[`ColorPicker > renders with ui correctly 1`] = `
 "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
  <div data-v-d6f23756="" class="flex gap-8">
-    <div data-v-d6f23756="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
+    <div data-v-d6f23756="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
      <div data-v-d6f23756="" class="w-full h-full relative rounded-md" data-color-picker-background="">
        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
      </div>
    </div>
-    <div data-v-d6f23756="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
+    <div data-v-d6f23756="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
    </div>
  </div>
--- a/test/components/snapshots/NavigationMenu-vue.spec.ts.snap
+++ b/test/components/snapshots/NavigationMenu-vue.spec.ts.snap
@@ -842,17 +842,23 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
          <!--v-if-->
        </div>
      </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-state="closed" class="min-w-0" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
          <!--v-if-->
          <!--v-if-->
        </button>
        <!--v-if-->
+        <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-1" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+          <!---->
+        </div>
      </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-state="closed" class="min-w-0" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary" width="1em" height="1em" viewBox="0 0 16 16"></svg>
          <!--v-if-->
          <!--v-if-->
        </button>
        <!--v-if-->
+        <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+          <!---->
+        </div>
      </li>
    </ul>
  </div>
--- a/test/components/snapshots/NavigationMenu.spec.ts.snap
+++ b/test/components/snapshots/NavigationMenu.spec.ts.snap
@@ -842,17 +842,23 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
          <!--v-if-->
        </div>
      </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+      <li data-state="closed" class="min-w-0" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
          <!--v-if-->
          <!--v-if-->
        </button>
        <!--v-if-->
+        <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-1" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+          <!---->
+        </div>
      </li>
-      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span>
+      <li data-state="closed" class="min-w-0" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span>
          <!--v-if-->
          <!--v-if-->
        </button>
        <!--v-if-->
+        <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+          <!---->
+        </div>
      </li>
    </ul>
  </div>
--- a/test/components/snapshots/Stepper-vue.spec.ts.snap
+++ b/test/components/snapshots/Stepper-vue.spec.ts.snap
@@ -10,8 +10,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -21,8 +21,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -32,8 +32,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -52,8 +52,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -63,8 +63,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -74,8 +74,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -94,8 +94,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -105,8 +105,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -116,8 +116,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -136,8 +136,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -147,8 +147,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -158,8 +158,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -178,8 +178,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -189,8 +189,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -200,8 +200,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -220,8 +220,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
@@ -231,8 +231,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -242,8 +242,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -262,8 +262,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -273,8 +273,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -284,8 +284,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
  </div>
@@ -304,8 +304,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -315,8 +315,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -326,8 +326,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -346,8 +346,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -357,8 +357,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -368,8 +368,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -388,8 +388,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
@@ -399,8 +399,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -410,8 +410,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -430,8 +430,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -441,8 +441,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -452,8 +452,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -472,8 +472,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -483,8 +483,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -494,8 +494,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -514,8 +514,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
@@ -525,8 +525,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
@@ -536,8 +536,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -556,8 +556,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -567,8 +567,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -578,8 +578,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -598,8 +598,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
@@ -609,8 +609,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
@@ -620,8 +620,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -640,8 +640,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -651,8 +651,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -662,8 +662,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -682,8 +682,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
@@ -693,8 +693,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
@@ -704,8 +704,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -724,8 +724,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -735,8 +735,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -746,8 +746,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -766,8 +766,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
@@ -777,8 +777,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
@@ -788,8 +788,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -808,8 +808,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -819,8 +819,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -830,8 +830,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -850,8 +850,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
@@ -861,8 +861,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
@@ -872,8 +872,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -892,8 +892,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -903,8 +903,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -914,8 +914,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -934,8 +934,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="text-default text-sm font-bold">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="text-default text-sm font-bold">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -945,8 +945,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="text-default text-sm font-bold">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="text-default text-sm font-bold">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -956,8 +956,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="text-default text-sm font-bold">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="text-default text-sm font-bold">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -976,8 +976,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -987,8 +987,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -998,8 +998,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
--- a/test/components/snapshots/Stepper.spec.ts.snap
+++ b/test/components/snapshots/Stepper.spec.ts.snap
@@ -10,8 +10,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -21,8 +21,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -32,8 +32,8 @@ exports[`Stepper > renders with as correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -52,8 +52,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -63,8 +63,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -74,8 +74,8 @@ exports[`Stepper > renders with class correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -94,8 +94,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -105,8 +105,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -116,8 +116,8 @@ exports[`Stepper > renders with content slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -136,8 +136,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -147,8 +147,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -158,8 +158,8 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -178,8 +178,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -189,8 +189,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -200,8 +200,8 @@ exports[`Stepper > renders with default slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -220,8 +220,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
@@ -231,8 +231,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -242,8 +242,8 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -262,8 +262,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -273,8 +273,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -284,8 +284,8 @@ exports[`Stepper > renders with description slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Description slot</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Description slot</div>
      </div>
    </div>
  </div>
@@ -304,8 +304,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -315,8 +315,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -326,8 +326,8 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -346,8 +346,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -357,8 +357,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -368,8 +368,8 @@ exports[`Stepper > renders with items correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -388,8 +388,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
@@ -399,8 +399,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -410,8 +410,8 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -430,8 +430,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -441,8 +441,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-inverted start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -452,8 +452,8 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -472,8 +472,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -483,8 +483,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -494,8 +494,8 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -514,8 +514,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
@@ -525,8 +525,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[54px]"></div>
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
@@ -536,8 +536,8 @@ exports[`Stepper > renders with size lg vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -556,8 +556,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -567,8 +567,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -578,8 +578,8 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -598,8 +598,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
@@ -609,8 +609,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[46px]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
@@ -620,8 +620,8 @@ exports[`Stepper > renders with size md vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -640,8 +640,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -651,8 +651,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -662,8 +662,8 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -682,8 +682,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
@@ -693,8 +693,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[38px]"></div>
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
@@ -704,8 +704,8 @@ exports[`Stepper > renders with size sm vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -724,8 +724,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -735,8 +735,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -746,8 +746,8 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -766,8 +766,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
@@ -777,8 +777,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[62px]"></div>
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
@@ -788,8 +788,8 @@ exports[`Stepper > renders with size xl vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-3.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -808,8 +808,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -819,8 +819,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -830,8 +830,8 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -850,8 +850,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
@@ -861,8 +861,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-primary top-[30px]"></div>
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
@@ -872,8 +872,8 @@ exports[`Stepper > renders with size xs vertical correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-1.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -892,8 +892,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -903,8 +903,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -914,8 +914,8 @@ exports[`Stepper > renders with title slot correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Title slot</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Title slot</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -934,8 +934,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="text-default text-sm font-bold">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="text-default text-sm font-bold">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -945,8 +945,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="text-default text-sm font-bold">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="text-default text-sm font-bold">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
@@ -956,8 +956,8 @@ exports[`Stepper > renders with ui correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="text-default text-sm font-bold">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="text-default text-sm font-bold">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
@@ -976,8 +976,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4>
-        <p id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</p>
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -987,8 +987,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4>
-        <p id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</p>
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
      </div>
    </div>
    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
@@ -998,8 +998,8 @@ exports[`Stepper > renders without linear correctly 1`] = `
        <!--v-if-->
      </div>
      <div class="mt-2.5">
-        <h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4>
-        <p id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</p>
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
      </div>
    </div>
  </div>
--- a/test/components/snapshots/Tabs-vue.spec.ts.snap
+++ b/test/components/snapshots/Tabs-vue.spec.ts.snap
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
--- a/test/components/snapshots/Tabs.spec.ts.snap
+++ b/test/components/snapshots/Tabs.spec.ts.snap
@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
 exports[`Tabs > renders with neutral variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-inverted"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">
@@ -200,7 +200,7 @@ exports[`Tabs > renders with orientation vertical correctly 1`] = `
 exports[`Tabs > renders with primary variant link correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
  <div role="tablist" aria-orientation="horizontal" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative flex p-1 group border-default w-full border-b -mb-px">
-    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
+    <div style="--reka-tabs-indicator-size: 0px; --reka-tabs-indicator-position: 0px;" class="absolute transition-[translate,width] duration-200 rounded-full left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) -bottom-px h-px bg-primary"></div><button id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" aria-controls="reka-tabs-v-0-0-0-content-0" data-state="active" data-orientation="horizontal" tabindex="-1" data-active="" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate">Tab1</span></button><button id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-1" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:user shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab2</span></button><button id="reka-tabs-v-0-0-0-trigger-2" role="tab" type="button" aria-selected="false" aria-controls="reka-tabs-v-0-0-0-content-2" data-state="inactive" data-orientation="horizontal" tabindex="-1" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors focus:outline-none justify-center px-3 py-1.5 text-sm gap-1.5 data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" data-reka-collection-item=""><span class="iconify i-lucide:bell shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Tab3</span></button>
  </div>
  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" class="focus:outline-none w-full">This is the content shown for Tab1</div>
  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" class="focus:outline-none w-full">