arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HugoRCD
2025-05-11 19:21:02 +02:00
parent 322a6f467a d140acc608
commit 266e870e67
71 changed files with 1131 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.github/ISSUE_TEMPLATE/bug-report-v3.yml vendored
View File

@@ -5,7 +5,7 @@ body:
- type: markdown - type: markdown
attributes: attributes:
value: | 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 - type: textarea
id: env id: env
attributes: attributes:
@@ -44,7 +44,7 @@ body:
id: reproduction id: reproduction
attributes: attributes:
label: Reproduction 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 placeholder: https://github.com/my/reproduction
validations: validations:
required: true required: true

2
.github/ISSUE_TEMPLATE/feature-request-v3.yml vendored
View File

@@ -5,7 +5,7 @@ body:
- type: markdown - type: markdown
attributes: attributes:
value: | 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 - type: textarea
id: description id: description
attributes: attributes:

2
.github/ISSUE_TEMPLATE/question-v3.yml vendored
View File

@@ -5,7 +5,7 @@ body:
- type: markdown - type: markdown
attributes: attributes:
value: | 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 - type: textarea
id: description id: description
attributes: attributes:

30
.github/reproduire/needs-reproduction.md vendored Normal file
View File

@@ -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>

17
.github/workflows/reproduire.yml vendored Normal file
View File

@@ -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

4
cli/templates.mjs
View File

@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
</script> </script>
<template> <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 /> <slot />
</Primitive> </Primitive>
</template> </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
</script> </script>
<template> <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> </template>
` `
} }

3
docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { refDebounced } from '@vueuse/core'
const searchTerm = ref('') const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200) const searchTermDebounced = refDebounced(searchTerm, 200)
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', { const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
key: 'command-palette-users',
params: { q: searchTermDebounced }, params: { q: searchTermDebounced },
transform: (data: { id: number, name: string, email: string }[]) => { 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}` } })) || [] return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []

2
docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
View File

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

2
docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
View File

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

203
docs/app/components/content/examples/table/TableGroupedRowsExample.vue Normal file
View File

@@ -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>

28
docs/app/components/content/examples/tabs/TabsModelValueExample.vue
View File

@@ -1,22 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TabsItem } from '@nuxt/ui' import type { TabsItem } from '@nuxt/ui'
const route = useRoute()
const router = useRouter()
const items: TabsItem[] = [ const items: TabsItem[] = [
{ {
label: 'Account' label: 'Account',
value: 'account'
}, },
{ {
label: 'Password' label: 'Password',
value: 'password'
} }
] ]
const active = ref('0') const active = computed({
get() {
// Note: This is for demonstration purposes only. Don't do this at home. return (route.query.tab as string) || 'account'
onMounted(() => { },
setInterval(() => { set(tab) {
active.value = String((Number(active.value) + 1) % items.length) // Hash is specified here to prevent the page from scrolling to the top
}, 2000) router.push({
path: '/components/tabs',
query: { tab },
hash: '#control-active-item'
})
}
}) })
</script> </script>

2
docs/app/composables/useLinks.ts
View File

@@ -98,7 +98,7 @@ export function useLinks() {
label: 'Raycast Extension', label: 'Raycast Extension',
description: 'Access Nuxt UI components without leaving your editor.', description: 'Access Nuxt UI components without leaving your editor.',
icon: 'i-simple-icons-raycast', icon: 'i-simple-icons-raycast',
to: 'https://www.raycast.com/HugoRCD/nuxt-ui', to: 'https://www.raycast.com/HugoRCD/nuxt',
target: '_blank' target: '_blank'
}, { }, {
label: 'Figma to Code', label: 'Figma to Code',

2
docs/content/1.getting-started/3.theme.md
View File

@@ -973,7 +973,7 @@ export default {
```vue [src/runtime/components/Card.vue] ```vue [src/runtime/components/Card.vue]
<template> <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 })"> <div :class="ui.header({ class: props.ui?.header })">
<slot name="header" /> <slot name="header" />
</div> </div>

2
docs/content/1.getting-started/contribution.md
View File

@@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc
### Documentation ### 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 ```bash
├── app/ ├── app/

2
docs/content/3.components/form.md
View File

@@ -24,7 +24,7 @@ It requires two props:
**No validation library is included** by default, ensure you **install the one you need**. **No validation library is included** by default, ensure you **install the one you need**.
:: ::
::tabs ::tabs{class="gap-0"}
::component-example{label="Valibot"} ::component-example{label="Valibot"}
--- ---
name: 'form-example-valibot' name: 'form-example-valibot'

6
docs/content/3.components/navigation-menu.md
View File

@@ -21,8 +21,12 @@ Use the `items` prop as an array of objects with the following properties:
- `icon?: string`{lang="ts-type"} - `icon?: string`{lang="ts-type"}
- `avatar?: AvatarProps`{lang="ts-type"} - `avatar?: AvatarProps`{lang="ts-type"}
- `badge?: string | number | BadgeProps`{lang="ts-type"} - `badge?: string | number | BadgeProps`{lang="ts-type"}
- `tooltip?: TooltipProps`{lang="ts-type"}
- `trailingIcon?: string`{lang="ts-type"} - `trailingIcon?: string`{lang="ts-type"}
- `type?: 'label' | 'link'`{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"} - `value?: string`{lang="ts-type"}
- `disabled?: boolean`{lang="ts-type"} - `disabled?: boolean`{lang="ts-type"}
- `class?: any`{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. Use the `orientation` prop to change the orientation of the NavigationMenu.
::note ::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 ::component-code

15
docs/content/3.components/slider.md
View File

@@ -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 ### Disabled
Use the `disabled` prop to disable the Slider. Use the `disabled` prop to disable the Slider.

24
docs/content/3.components/table.md
View File

@@ -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. 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 ### 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). 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).

4
docs/content/3.components/tabs.md
View File

@@ -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"} :component-example{name="tabs-model-value-example"}
::tip
You can also pass the `value` of one of the items if provided.
::
### With content slot ### With content slot
Use the `#content` slot to customize the content of each item. Use the `#content` slot to customize the content of each item.

18
docs/package.json
View File

@@ -3,25 +3,25 @@
"name": "@nuxt/ui-docs", "name": "@nuxt/ui-docs",
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@ai-sdk/vue": "^1.2.10", "@ai-sdk/vue": "^1.2.11",
"@iconify-json/logos": "^1.2.4", "@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/simple-icons": "^1.2.33",
"@iconify-json/vscode-icons": "^1.2.20", "@iconify-json/vscode-icons": "^1.2.20",
"@nuxt/content": "^3.5.1", "@nuxt/content": "^3.5.1",
"@nuxt/image": "^1.10.0", "@nuxt/image": "^1.10.0",
"@nuxt/ui": "latest", "@nuxt/ui": "latest",
"@nuxt/ui-pro": "^3.1.1", "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
"@nuxthub/core": "^0.8.25", "@nuxthub/core": "^0.8.27",
"@nuxtjs/plausible": "^1.2.0", "@nuxtjs/plausible": "^1.2.0",
"@octokit/rest": "^21.1.1", "@octokit/rest": "^21.1.1",
"@rollup/plugin-yaml": "^4.1.2", "@rollup/plugin-yaml": "^4.1.2",
"@vueuse/integrations": "^13.1.0", "@vueuse/integrations": "^13.1.0",
"@vueuse/nuxt": "^13.1.0", "@vueuse/nuxt": "^13.1.0",
"ai": "^4.3.13", "ai": "^4.3.15",
"capture-website": "^4.2.0", "capture-website": "^4.2.0",
"joi": "^17.13.3", "joi": "^17.13.3",
"motion-v": "^1.0.1", "motion-v": "^1.0.2",
"nuxt": "^3.17.2", "nuxt": "^3.17.2",
"nuxt-component-meta": "^0.11.0", "nuxt-component-meta": "^0.11.0",
"nuxt-llms": "^0.1.2", "nuxt-llms": "^0.1.2",
@@ -31,12 +31,12 @@
"sortablejs": "^1.15.6", "sortablejs": "^1.15.6",
"superstruct": "^2.0.2", "superstruct": "^2.0.2",
"ufo": "^1.6.1", "ufo": "^1.6.1",
"valibot": "^1.0.0", "valibot": "^1.1.0",
"workers-ai-provider": "^0.3.0", "workers-ai-provider": "^0.3.1",
"yup": "^1.6.1", "yup": "^1.6.1",
"zod": "^3.24.4" "zod": "^3.24.4"
}, },
"devDependencies": { "devDependencies": {
"wrangler": "^4.14.1" "wrangler": "^4.14.4"
} }
} }

52
docs/server/plugins/llms.ts
View File

@@ -46,11 +46,33 @@ const parseBoolean = (value?: string): boolean => value === 'true'
function getComponentMeta(componentName: string) { function getComponentMeta(componentName: string) {
const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1) 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 { return {
pascalCaseName, pascalCaseName,
metaComponentName, metaComponentName: finalMetaComponentName,
componentMeta: (meta as Record<string, any>)[metaComponentName]?.meta componentMeta
} }
} }
@@ -168,6 +190,7 @@ function emitItemHandler(event: any): string {
const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => { const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
const componentTheme = computedTheme[componentName as keyof typeof computedTheme] const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
return { return {
[pro ? 'uiPro' : 'ui']: prose [pro ? 'uiPro' : 'ui']: prose
? { prose: { [componentName]: componentTheme } } ? { prose: { [componentName]: componentTheme } }
@@ -284,10 +307,14 @@ export default defineNitroPlugin((nitroApp) => {
const componentName = camelCase(doc.title) const componentName = camelCase(doc.title)
visitAndReplace(doc, 'component-theme', (node) => { 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 pro = parseBoolean(attributes[':pro'])
const prose = parseBoolean(attributes[':prose']) const prose = parseBoolean(attributes[':prose'])
const appConfig = generateThemeConfig({ pro, prose, componentName }) const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
replaceNodeWithPre( replaceNodeWithPre(
node, node,
@@ -322,14 +349,23 @@ export default defineNitroPlugin((nitroApp) => {
}) })
visitAndReplace(doc, 'component-props', (node) => { 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 if (!componentMeta?.props) return
const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
const interfaceCode = generateTSInterface( const interfaceCode = generateTSInterface(
`${pascalCaseName}Props`, interfaceName,
Object.values(componentMeta.props), Object.values(componentMeta.props),
propItemHandler, propItemHandler,
`Props for the ${pascalCaseName} component` `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
) )
replaceNodeWithPre(node, 'ts', interfaceCode) replaceNodeWithPre(node, 'ts', interfaceCode)
}) })

4
package.json
View File

@@ -150,7 +150,7 @@
"tailwindcss": "^4.1.5", "tailwindcss": "^4.1.5",
"tinyglobby": "^0.2.13", "tinyglobby": "^0.2.13",
"unplugin": "^2.3.2", "unplugin": "^2.3.2",
"unplugin-auto-import": "^19.1.2", "unplugin-auto-import": "^19.2.0",
"unplugin-vue-components": "^28.5.0", "unplugin-vue-components": "^28.5.0",
"vaul-vue": "^0.4.1", "vaul-vue": "^0.4.1",
"vue-component-type-helpers": "^2.2.10" "vue-component-type-helpers": "^2.2.10"
@@ -166,7 +166,7 @@
"happy-dom": "^17.4.6", "happy-dom": "^17.4.6",
"nuxt": "^3.17.2", "nuxt": "^3.17.2",
"release-it": "^19.0.2", "release-it": "^19.0.2",
"vitest": "^3.1.2", "vitest": "^3.1.3",
"vitest-environment-nuxt": "^1.0.1", "vitest-environment-nuxt": "^1.0.1",
"vue-tsc": "^2.2.10" "vue-tsc": "^2.2.10"
}, },

4
playground/package.json
View File

@@ -9,10 +9,10 @@
"typecheck": "nuxt typecheck" "typecheck": "nuxt typecheck"
}, },
"dependencies": { "dependencies": {
"@iconify-json/lucide": "^1.2.40", "@iconify-json/lucide": "^1.2.41",
"@iconify-json/simple-icons": "^1.2.33", "@iconify-json/simple-icons": "^1.2.33",
"@nuxt/ui": "latest", "@nuxt/ui": "latest",
"@nuxthub/core": "^0.8.25", "@nuxthub/core": "^0.8.27",
"nuxt": "^3.17.2", "nuxt": "^3.17.2",
"zod": "^3.24.4" "zod": "^3.24.4"
}, },

837
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
src/runtime/components/Accordion.vue
View File

@@ -89,7 +89,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
</script> </script>
<template> <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 <AccordionItem
v-for="(item, index) in props.items" v-for="(item, index) in props.items"
v-slot="{ open }" v-slot="{ open }"

2
src/runtime/components/Alert.vue
View File

@@ -97,7 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
</script> </script>
<template> <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"> <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 })" /> <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 })" /> <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />

2
src/runtime/components/Avatar.vue
View File

@@ -81,7 +81,7 @@ function onError() {
</script> </script>
<template> <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 <component
:is="ImageComponent" :is="ImageComponent"
v-if="src && !error" v-if="src && !error"

2
src/runtime/components/AvatarGroup.vue
View File

@@ -93,7 +93,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
</script> </script>
<template> <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 })" /> <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 })" /> <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
</Primitive> </Primitive>

4
src/runtime/components/Badge.vue
View File

@@ -65,14 +65,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
</script> </script>
<template> <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"> <slot name="leading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" /> <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 })" /> <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>
<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 }} {{ label }}
</span> </span>
</slot> </slot>

2
src/runtime/components/Breadcrumb.vue
View File

@@ -81,7 +81,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
</script> </script>
<template> <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 })"> <ol :class="ui.list({ class: props.ui?.list })">
<template v-for="(item, index) in items" :key="index"> <template v-for="(item, index) in items" :key="index">
<li :class="ui.item({ class: props.ui?.item })"> <li :class="ui.item({ class: props.ui?.item })">

4
src/runtime/components/Button.vue
View File

@@ -123,7 +123,7 @@ const ui = computed(() => tv({
v-slot="{ active, ...slotProps }" v-slot="{ active, ...slotProps }"
:type="type" :type="type"
:disabled="disabled || isLoading" :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'])" v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
custom custom
> >
@@ -143,7 +143,7 @@ const ui = computed(() => tv({
</slot> </slot>
<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 }} {{ label }}
</span> </span>
</slot> </slot>

2
src/runtime/components/Calendar.vue
View File

@@ -157,7 +157,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
:default-value="defaultValue" :default-value="defaultValue"
:locale="locale" :locale="locale"
:dir="dir" :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.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> <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>

2
src/runtime/components/Card.vue
View File

@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
</script> </script>
<template> <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 })"> <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
<slot name="header" /> <slot name="header" />
</div> </div>

2
src/runtime/components/Carousel.vue
View File

@@ -278,7 +278,7 @@ defineExpose({
role="region" role="region"
aria-roledescription="carousel" aria-roledescription="carousel"
tabindex="0" tabindex="0"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
@keydown="onKeyDown" @keydown="onKeyDown"
> >
<div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })"> <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">

2
src/runtime/components/Checkbox.vue
View File

@@ -101,7 +101,7 @@ function onUpdate(value: any) {
<!-- eslint-disable vue/no-template-shadow --> <!-- eslint-disable vue/no-template-shadow -->
<template> <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 })"> <div :class="ui.container({ class: props.ui?.container })">
<CheckboxRoot <CheckboxRoot
:id="id" :id="id"

2
src/runtime/components/CheckboxGroup.vue
View File

@@ -153,7 +153,7 @@ function onUpdate(value: any) {
v-bind="rootProps" v-bind="rootProps"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
@update:model-value="onUpdate" @update:model-value="onUpdate"
> >
<fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs"> <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">

2
src/runtime/components/Chip.vue
View File

@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
</script> </script>
<template> <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 v-bind="$attrs">
<slot /> <slot />
</Slot> </Slot>

2
src/runtime/components/Collapsible.vue
View File

@@ -46,7 +46,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
</script> </script>
<template> <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> <CollapsibleTrigger v-if="!!slots.default" as-child>
<slot :open="open" /> <slot :open="open" />
</CollapsibleTrigger> </CollapsibleTrigger>

2
src/runtime/components/ColorPicker.vue
View File

@@ -263,7 +263,7 @@ const trackThumbStyle = computed(() => ({
</script> </script>
<template> <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 :class="ui.picker({ class: props.ui?.picker })">
<div <div
ref="selectorRef" ref="selectorRef"

2
src/runtime/components/CommandPalette.vue
View File

@@ -249,7 +249,7 @@ const groups = computed(() => {
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<template> <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> <ListboxFilter v-model="searchTerm" as-child>
<UInput <UInput
:placeholder="placeholder || t('commandPalette.placeholder')" :placeholder="placeholder || t('commandPalette.placeholder')"

2
src/runtime/components/FormField.vue
View File

@@ -90,7 +90,7 @@ provide(formFieldInjectionKey, computed(() => ({
</script> </script>
<template> <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 :class="ui.wrapper({ class: props.ui?.wrapper })">
<div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })"> <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
<Label :for="id" :class="ui.label({ class: props.ui?.label })"> <Label :for="id" :class="ui.label({ class: props.ui?.label })">

2
src/runtime/components/Input.vue
View File

@@ -163,7 +163,7 @@ defineExpose({
</script> </script>
<template> <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 <input
:id="id" :id="id"
ref="inputRef" ref="inputRef"

2
src/runtime/components/InputMenu.vue
View File

@@ -406,7 +406,7 @@ defineExpose({
v-bind="rootProps" v-bind="rootProps"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
:as-child="!!multiple" :as-child="!!multiple"
ignore-filter ignore-filter
@update:model-value="onUpdate" @update:model-value="onUpdate"

2
src/runtime/components/InputNumber.vue
View File

@@ -145,7 +145,7 @@ defineExpose({
<NumberFieldRoot <NumberFieldRoot
v-bind="rootProps" v-bind="rootProps"
:id="id" :id="id"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:locale="locale" :locale="locale"

33
src/runtime/components/NavigationMenu.vue
View File

@@ -3,7 +3,7 @@
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui' import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/navigation-menu' 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' import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'
type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'> 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"} * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
*/ */
badge?: string | number | BadgeProps 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 * @IconifyIcon
*/ */
@@ -38,6 +44,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
type?: 'label' | 'link' type?: 'label' | 'link'
slot?: string slot?: string
value?: string value?: string
/**
* Make the item collapsible.
* Only works when `orientation` is `vertical`.
* @defaultValue true
*/
collapsible?: boolean
children?: NavigationMenuChildItem[] children?: NavigationMenuChildItem[]
onSelect?(e: Event): void onSelect?(e: Event): void
[key: string]: any [key: string]: any
@@ -143,6 +155,7 @@ import UAvatar from './Avatar.vue'
import UIcon from './Icon.vue' import UIcon from './Icon.vue'
import UBadge from './Badge.vue' import UBadge from './Badge.vue'
import UCollapsible from './Collapsible.vue' import UCollapsible from './Collapsible.vue'
import UTooltip from './Tooltip.vue'
const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
orientation: 'horizontal', orientation: 'horizontal',
@@ -229,7 +242,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
:class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })" :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 })" /> <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
</slot> </slot>
</span> </span>
@@ -238,17 +251,18 @@ const lists = computed<NavigationMenuItem[][]>(() =>
<DefineItemTemplate v-slot="{ item, index, level = 0 }"> <DefineItemTemplate v-slot="{ item, index, level = 0 }">
<component <component
:is="(orientation === 'vertical' && item.children?.length && !collapsed) ? UCollapsible : NavigationMenuItem" :is="(orientation === 'vertical' && item.children?.length) ? UCollapsible : NavigationMenuItem"
as="li" as="li"
:value="item.value || String(index)" :value="item.value || String(index)"
:default-open="item.defaultOpen" :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" :open="item.open"
> >
<div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })"> <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
<ReuseLinkTemplate :item="item" :index="index" /> <ReuseLinkTemplate :item="item" :index="index" />
</div> </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 <component
:is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink" :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : NavigationMenuLink"
as-child as-child
@@ -256,9 +270,14 @@ const lists = computed<NavigationMenuItem[][]>(() =>
:disabled="item.disabled" :disabled="item.disabled"
@select="item.onSelect" @select="item.onSelect"
> >
<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 })"> <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" /> <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
</ULinkBase> </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> </component>
<NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })"> <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
@@ -289,7 +308,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
</NavigationMenuContent> </NavigationMenuContent>
</ULink> </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 })"> <ul :class="ui.childList({ class: props.ui?.childList })">
<ReuseItemTemplate <ReuseItemTemplate
v-for="(childItem, childIndex) in item.children" v-for="(childItem, childIndex) in item.children"
@@ -304,7 +323,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
</component> </component>
</DefineItemTemplate> </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" /> <slot name="list-leading" />
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`"> <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">

2
src/runtime/components/Pagination.vue
View File

@@ -140,7 +140,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.pagination |
</script> </script>
<template> <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 })"> <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 })"> <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
<slot name="first"> <slot name="first">

2
src/runtime/components/PinInput.vue
View File

@@ -113,7 +113,7 @@ defineExpose({
v-bind="{ ...rootProps, ...ariaAttrs }" v-bind="{ ...rootProps, ...ariaAttrs }"
:id="id" :id="id"
:name="name" :name="name"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
@update:model-value="emitFormInput()" @update:model-value="emitFormInput()"
@complete="onComplete" @complete="onComplete"
> >

2
src/runtime/components/Progress.vue
View File

@@ -167,7 +167,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.progress ||
</script> </script>
<template> <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"> <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
<slot name="status" :percent="percent"> <slot name="status" :percent="percent">
{{ percent }}% {{ percent }}%

2
src/runtime/components/RadioGroup.vue
View File

@@ -166,7 +166,7 @@ function onUpdate(value: any) {
v-bind="rootProps" v-bind="rootProps"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
@update:model-value="onUpdate" @update:model-value="onUpdate"
> >
<fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs"> <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">

4
src/runtime/components/Select.vue
View File

@@ -21,7 +21,7 @@ interface SelectItemBase {
* @defaultValue 'item' * @defaultValue 'item'
*/ */
type?: 'label' | 'separator' | 'item' type?: 'label' | 'separator' | 'item'
value?: string | number value?: AcceptableValue | boolean
disabled?: boolean disabled?: boolean
onSelect?(e?: Event): void onSelect?(e?: Event): void
[key: string]: any [key: string]: any
@@ -238,7 +238,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
@update:model-value="onUpdate" @update:model-value="onUpdate"
@update:open="onUpdateOpen" @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 })"> <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"> <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 })" /> <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

2
src/runtime/components/SelectMenu.vue
View File

@@ -373,7 +373,7 @@ function isSelectItem(item: SelectMenuItem): item is _SelectMenuItem {
@update:open="onUpdateOpen" @update:open="onUpdateOpen"
> >
<ComboboxAnchor as-child> <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 })"> <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"> <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 })" /> <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

2
src/runtime/components/Separator.vue
View File

@@ -75,7 +75,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.separator ||
</script> </script>
<template> <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 })" /> <div :class="ui.border({ class: props.ui?.border })" />
<template v-if="label || icon || avatar || !!slots.default"> <template v-if="label || icon || avatar || !!slots.default">

24
src/runtime/components/Slider.vue
View File

@@ -2,6 +2,7 @@
import type { SliderRootProps } from 'reka-ui' import type { SliderRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/slider' import theme from '#build/ui/slider'
import type { TooltipProps } from '../types'
import type { ComponentConfig } from '../types/utils' import type { ComponentConfig } from '../types/utils'
type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'> type Slider = ComponentConfig<typeof theme, AppConfig, 'slider'>
@@ -25,6 +26,12 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
* @defaultValue 'horizontal' * @defaultValue 'horizontal'
*/ */
orientation?: SliderRootProps['orientation'] 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. */ /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
defaultValue?: number | number[] defaultValue?: number | number[]
class?: any class?: any
@@ -44,6 +51,7 @@ import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
import { useFormField } from '../composables/useFormField' import { useFormField } from '../composables/useFormField'
import { tv } from '../utils/tv' import { tv } from '../utils/tv'
import UTooltip from './Tooltip.vue'
const props = withDefaults(defineProps<SliderProps>(), { const props = withDefaults(defineProps<SliderProps>(), {
min: 0, 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 || {}) })({ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })({
disabled: disabled.value, disabled: disabled.value,
@@ -104,7 +112,7 @@ function onChange(value: any) {
v-model="sliderValue" v-model="sliderValue"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
:default-value="defaultSliderValue" :default-value="defaultSliderValue"
@update:model-value="emitFormInput()" @update:model-value="emitFormInput()"
@value-commit="onChange" @value-commit="onChange"
@@ -113,6 +121,16 @@ function onChange(value: any) {
<SliderRange :class="ui.range({ class: props.ui?.range })" /> <SliderRange :class="ui.range({ class: props.ui?.range })" />
</SliderTrack> </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> </SliderRoot>
</template> </template>

6
src/runtime/components/Stepper.vue
View File

@@ -129,7 +129,7 @@ defineExpose({
</script> </script>
<template> <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 })"> <div :class="ui.header({ class: props.ui?.header })">
<StepperItem <StepperItem
v-for="(item, count) in items" v-for="(item, count) in items"
@@ -157,12 +157,12 @@ defineExpose({
</div> </div>
<div :class="ui.wrapper({ class: props.ui?.wrapper })"> <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"> <slot name="title" :item="item">
{{ item.title }} {{ item.title }}
</slot> </slot>
</StepperTitle> </StepperTitle>
<StepperDescription :class="ui.description({ class: props.ui?.description })"> <StepperDescription as="div" :class="ui.description({ class: props.ui?.description })">
<slot name="description" :item="item"> <slot name="description" :item="item">
{{ item.description }} {{ item.description }}
</slot> </slot>

2
src/runtime/components/Switch.vue
View File

@@ -96,7 +96,7 @@ function onUpdate(value: any) {
</script> </script>
<template> <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 })"> <div :class="ui.container({ class: props.ui?.container })">
<SwitchRoot <SwitchRoot
:id="id" :id="id"

2
src/runtime/components/Table.vue
View File

@@ -338,7 +338,7 @@ defineExpose({
</script> </script>
<template> <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] })"> <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
<caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })"> <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
<slot name="caption"> <slot name="caption">

2
src/runtime/components/Tabs.vue
View File

@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {})
</script> </script>
<template> <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 })"> <TabsList :class="ui.list({ class: props.ui?.list })">
<TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" /> <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />

2
src/runtime/components/Textarea.vue
View File

@@ -190,7 +190,7 @@ defineExpose({
</script> </script>
<template> <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 <textarea
:id="id" :id="id"
ref="textareaRef" ref="textareaRef"

2
src/runtime/components/Toast.vue
View File

@@ -116,7 +116,7 @@ defineExpose({
v-slot="{ remaining, duration }" v-slot="{ remaining, duration }"
v-bind="rootProps" v-bind="rootProps"
:data-orientation="orientation" :data-orientation="orientation"
:class="ui.root({ class: [props.class, props.ui?.root] })" :class="ui.root({ class: [props.ui?.root, props.class] })"
:style="{ '--height': height }" :style="{ '--height': height }"
> >
<slot name="leading"> <slot name="leading">

2
src/runtime/components/Toaster.vue
View File

@@ -131,7 +131,7 @@ function getOffset(index: number) {
<ToastPortal v-bind="portalProps"> <ToastPortal v-bind="portalProps">
<ToastViewport <ToastViewport
:data-expanded="expanded" :data-expanded="expanded"
:class="ui.viewport({ class: [props.class, props.ui?.viewport] })" :class="ui.viewport({ class: [props.ui?.viewport, props.class] })"
:style="{ :style="{
'--scale-factor': '0.05', '--scale-factor': '0.05',
'--translate-factor': position?.startsWith('top') ? '1px' : '-1px', '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',

2
src/runtime/components/Tree.vue
View File

@@ -198,7 +198,7 @@ const defaultExpanded = computed(() =>
<TreeRoot <TreeRoot
v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)" 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" :get-key="getItemValue"
:default-expanded="defaultExpanded" :default-expanded="defaultExpanded"
:selection-behavior="selectionBehavior" :selection-behavior="selectionBehavior"

4
src/theme/color-picker.ts
View File

@@ -2,10 +2,10 @@ export default {
slots: { slots: {
root: 'data-[disabled]:opacity-75', root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4', picker: 'flex gap-4',
selector: 'rounded-md', selector: 'rounded-md touch-none',
selectorBackground: 'w-full h-full relative rounded-md', 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', 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' 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: { variants: {

3
src/theme/tabs.ts
View File

@@ -25,7 +25,8 @@ export default (options: Required<ModuleOptions>) => ({
}, },
link: { link: {
list: 'border-default', list: 'border-default',
indicator: 'rounded-full' indicator: 'rounded-full',
trigger: 'focus:outline-none'
} }
}, },
orientation: { orientation: {

56
test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
View File

@@ -3,12 +3,12 @@
exports[`ColorPicker > renders with as correctly 1`] = ` exports[`ColorPicker > renders with as correctly 1`] = `
"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
exports[`ColorPicker > renders with class 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="data-[disabled]:opacity-75 w-96">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
exports[`ColorPicker > renders with disabled 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="data-[disabled]:opacity-75" data-disabled="true">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
exports[`ColorPicker > renders with format cmyk correctly 1`] = ` exports[`ColorPicker > renders with format cmyk correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
exports[`ColorPicker > renders with format hex correctly 1`] = ` exports[`ColorPicker > renders with format hex correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
exports[`ColorPicker > renders with format hsl correctly 1`] = ` exports[`ColorPicker > renders with format hsl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
exports[`ColorPicker > renders with format lab correctly 1`] = ` exports[`ColorPicker > renders with format lab correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
exports[`ColorPicker > renders with format rgb correctly 1`] = ` exports[`ColorPicker > renders with format rgb correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
exports[`ColorPicker > renders with size lg correctly 1`] = ` exports[`ColorPicker > renders with size lg correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
exports[`ColorPicker > renders with size md correctly 1`] = ` exports[`ColorPicker > renders with size md correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
exports[`ColorPicker > renders with size sm correctly 1`] = ` exports[`ColorPicker > renders with size sm correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
exports[`ColorPicker > renders with size xl correctly 1`] = ` exports[`ColorPicker > renders with size xl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
exports[`ColorPicker > renders with size xs correctly 1`] = ` exports[`ColorPicker > renders with size xs correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
exports[`ColorPicker > renders with ui correctly 1`] = ` exports[`ColorPicker > renders with ui correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75"> "<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-8"> <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="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 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> </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 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>
</div> </div>

56
test/components/__snapshots__/ColorPicker.spec.ts.snap
View File

@@ -3,12 +3,12 @@
exports[`ColorPicker > renders with as correctly 1`] = ` exports[`ColorPicker > renders with as correctly 1`] = `
"<section data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
exports[`ColorPicker > renders with class 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="data-[disabled]:opacity-75 w-96">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
exports[`ColorPicker > renders with disabled 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="data-[disabled]:opacity-75" data-disabled="true">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
exports[`ColorPicker > renders with format cmyk correctly 1`] = ` exports[`ColorPicker > renders with format cmyk correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
exports[`ColorPicker > renders with format hex correctly 1`] = ` exports[`ColorPicker > renders with format hex correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
exports[`ColorPicker > renders with format hsl correctly 1`] = ` exports[`ColorPicker > renders with format hsl correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
exports[`ColorPicker > renders with format lab correctly 1`] = ` exports[`ColorPicker > renders with format lab correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
exports[`ColorPicker > renders with format rgb correctly 1`] = ` exports[`ColorPicker > renders with format rgb correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
exports[`ColorPicker > renders with size lg correctly 1`] = ` exports[`ColorPicker > renders with size lg correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
exports[`ColorPicker > renders with size md correctly 1`] = ` exports[`ColorPicker > renders with size md correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
exports[`ColorPicker > renders with size sm correctly 1`] = ` exports[`ColorPicker > renders with size sm correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
exports[`ColorPicker > renders with size xl correctly 1`] = ` exports[`ColorPicker > renders with size xl correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
exports[`ColorPicker > renders with size xs correctly 1`] = ` exports[`ColorPicker > renders with size xs correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-4"> <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="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 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> </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 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>
</div> </div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
exports[`ColorPicker > renders with ui correctly 1`] = ` exports[`ColorPicker > renders with ui correctly 1`] = `
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75"> "<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
<div data-v-d6f23756="" class="flex gap-8"> <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="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 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> </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 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>
</div> </div>

10
test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
View File

@@ -842,17 +842,23 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
<!--v-if--> <!--v-if-->
</div> </div>
</li> </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-->
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--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>
<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-->
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--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> </li>
</ul> </ul>
</div> </div>

10
test/components/__snapshots__/NavigationMenu.spec.ts.snap
View File

@@ -842,17 +842,23 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
<!--v-if--> <!--v-if-->
</div> </div>
</li> </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-->
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--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>
<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-->
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--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> </li>
</ul> </ul>
</div> </div>

288
test/components/__snapshots__/Stepper-vue.spec.ts.snap
View File

@@ -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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<p id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Description slot</p> <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<p id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Description slot</p> <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Description slot</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
<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-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-base">Address</div>
<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-description-v-1" class="text-muted text-wrap text-base">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3"> <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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-base">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-base">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-base">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2"> <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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
<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-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-lg">Address</div>
<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-description-v-1" class="text-muted text-wrap text-lg">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5"> <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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-lg">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-lg">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-lg">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5"> <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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-xs">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Title slot</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Title slot</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Title slot</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Title slot</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Title slot</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Title slot</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="text-default text-sm font-bold">Address</h4> <div id="reka-stepper-item-title-v-0" class="text-default text-sm font-bold">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="text-default text-sm font-bold">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="text-default text-sm font-bold">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="text-default text-sm font-bold">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="text-default text-sm font-bold">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
<p id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</p> <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</div> </div>
</div> </div>

288
test/components/__snapshots__/Stepper.spec.ts.snap
View File

@@ -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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Description slot</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-base">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-base">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3"> <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 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>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-base">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-base">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3"> <div class="mt-3">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-base">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-base">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2"> <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 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>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-lg">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-lg">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5"> <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 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>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-lg">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-lg">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-3.5"> <div class="mt-3.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-lg">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-lg">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-xs">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-xs">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5"> <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 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>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-xs">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-xs">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5"> <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--> <!--v-if-->
</div> </div>
<div class="mt-1.5"> <div class="mt-1.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-xs">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-xs">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <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> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Title slot</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <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> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Title slot</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <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> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Title slot</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="text-default text-sm font-bold">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="text-default text-sm font-bold">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="text-default text-sm font-bold">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="text-default text-sm font-bold">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="text-default text-sm font-bold">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="text-default text-sm font-bold">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</h4> <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
<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-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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 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>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</h4> <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
<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-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
</div> </div>
</div> </div>
<div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full"> <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--> <!--v-if-->
</div> </div>
<div class="mt-2.5"> <div class="mt-2.5">
<h4 id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</h4> <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
<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-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
</div> </div>
</div> </div>
</div> </div>

4
test/components/__snapshots__/Tabs-vue.spec.ts.snap
View File

@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
exports[`Tabs > renders with neutral variant link 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 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 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>
<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-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"> <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`] = ` exports[`Tabs > renders with primary variant link correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col"> "<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 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>
<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-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"> <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">

4
test/components/__snapshots__/Tabs.spec.ts.snap
View File

@@ -155,7 +155,7 @@ exports[`Tabs > renders with modelValue correctly 1`] = `
exports[`Tabs > renders with neutral variant link 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 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 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>
<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-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"> <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`] = ` exports[`Tabs > renders with primary variant link correctly 1`] = `
"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col"> "<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 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>
<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-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"> <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">